import React, { useCallback, useEffect, useMemo, useState } from 'react'
import s from './index.module.less'
import closeIcon from '@/assets/img/x.png'
import clearIcon from '@/assets/img/clear.png'
import searchIcon from '@/assets/img/search.png'
import { useDispatch, useSelector } from 'react-redux'
import { getHomeCountry } from '@redux/action/homeActions'
import List from 'rc-virtual-list'
import classNames from 'classnames'
import { AutoSizer } from 'react-virtualized'
import Input from 'rc-input'
import * as _ from 'lodash'
import { RootState } from '@redux/reducer'

const Home: React.FC = () =>{
  const state = useSelector((store: RootState) => store.home)
  const [country, setCountry] = useState<string>('')
  const [focusFlag, setFocusFlag] = useState<boolean>(false)
  const { countryList } = state
  const dispatch = useDispatch()
  const cellRender = useCallback((item: any, index: number) => {
    const { country: countryName, abbreviation = '' } = item
    return (
      <div className={s.item} key={index}>
        <span className={classNames('fi', `fi-${abbreviation?.toLowerCase()}`)}></span>
        <span className={s.text}>{ countryName }</span>
      </div>
    )
  }, [])
  const getFilterData = useMemo(() => (value: string) => {
    setCountry(value)
    _.delay(() => {
      dispatch(getHomeCountry({
        value
      }))
    }, 100)
  }, [])
  useEffect(() => {
    dispatch(getHomeCountry({ value: '' }))
  }, [])
  return (
    <section className={s.mask}>
      <div className={s.wrap}>
        <div className={s.title}>
          <span>Choose a country or region</span>
          <img className={s.close} src={closeIcon} alt=""/>
        </div>
        <Input
          className={s.search}
          prefix={<img className={s.searchIcon} src={searchIcon} alt=""/>}
          type="text"
          onFocus={() => { setFocusFlag(true) }}
          onBlur={() => { setFocusFlag(false) }}
          allowClear={focusFlag && country !== '' ? {
            clearIcon: (<img src={clearIcon} className={s.clear} />)
          } : false}
          value={country}
          placeholder={'Search a country'}
          onChange={(e) => {
            getFilterData(e.target.value)
          }}/>
        <div className={s.content}>
          <AutoSizer disableWidth>
            {
              (({ height }) => {
                if (!countryList?.length) {
                  return (
                    <div className={s.empty}>
                      No Result
                    </div>
                  )
                }
                return <List
                  data={countryList}
                  itemHeight={72}
                  height={height}
                  itemKey={'country'}

                >
                  {
                    (item: any, index: number) => cellRender(item, index)
                  }
                </List>
              })
            }
          </AutoSizer>
        </div>
      </div>
    </section>
  )
}
export default Home
